<template>
  <div id="app">
    
    <p class="title">人脸识别比对系统</p>
    <p class="time">{{time}}</p>
    <div  :class="acviveClass">
      <div class="tab">
        <!-- <span class="tab1">1:1</span>
        <span class="tab2">1:N</span> -->
        <router-link class="tab1" tag="span" to="/">1:1</router-link>
        <router-link class="tab2" tag="span" to="many">1:N</router-link>
      </div>
      <div class="main">
        <router-view/>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      time: '',
      acviveClass:'content active1'
    }
  },
  mounted(){
    let date = new Date().getTime()
    console.log(this.getTime(date))
    this.time = this.getTime(date)
    
  },
  methods:{
     getTime(timestamp) {
      var date = new Date(timestamp);
      // console.log(date);
      let Y = date.getFullYear() + "年";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m;
    }
  },
  watch: {
    '$route'(to, from) {
      console.log(to)
      if(to.name == "many"){
        this.acviveClass = "content active2"
      }else{
        this.acviveClass = "content active1"
      }
    }
  }
}
</script>

<style>
p{
  margin: 0
}
#app {
  height: 80vh;
  background: url(./assets/bg.png);
  padding: 10vh 10vw;
  overflow: hidden;
}
.title{
  float: left;
  color: #fff;
  font-size: 30px;
}
.time{
  float: right;
  color: #fff;
  font-size: 22px;

}
.content{
  clear: both;
  width: 100%;
  height: 600px;
  position: relative;
  top: calc(50% - 300px);
}
.active1{
  background: url(./assets/bg1.png);
  background-size: 100% 100%
}
.active2{
  background: url(./assets/bg-2.png);
  background-size: 100% 100%
}
.tab1,.tab2{
  width: 256px;
  height: 60px;
  line-height: 60px;
  font-size: 22px;
  display: inline-block;
  text-align: center;
  color: #fff;
  /* background: rgba(0, 0, 0, 0.3); */
  cursor: pointer;
}
.tab{
  /* margin-top: 50% */
}
.main{
  height: 550px;
  /* background: rgba(0, 0, 0, 0.3); */
  /* border: 1px solid #fff; */
border-top: none
}
</style>
